<template>
  <div class="center-panel">
    <div class="center-map"></div>
    <!-- 底部列表 -->
    <div class="center-list">
      <PanelTitle
        class="c-title"
        :style="{ backgroundImage: `url(${cTitle})` }"
        title="企业治污设施运行情况"
      ></PanelTitle>
      <div class="data-status-list">
        <div
          class="item ph"
          :style="{
            backgroundImage: `url(${kuanB})`,
          }"
        >
          <img class="icon" :src="phIconB" alt="" />
          <span class="nums">{{ currentPhValue }}</span>
          <div class="names">PH数值</div>
        </div>
        <div
          class="item sb"
          :style="{
            backgroundImage: `url(${getBackKuanImg(data.sb_1)})`,
          }"
        >
          <img class="icon" :src="sbIconImgMap[data.sb_1]" alt="" />
          <div class="status" :class="data.sb_1">
            <span>{{ statusMap[data.sb_1] }}</span>
          </div>
          <div class="names">1号水泵</div>
        </div>
        <div
          class="item sb"
          :style="{
            backgroundImage: `url(${getBackKuanImg(data.sb_2)})`,
          }"
        >
          <img class="icon" :src="sbIconImgMap[data.sb_2]" alt="" />
          <div class="status" :class="data.sb_2">
            <span>{{ statusMap[data.sb_2] }}</span>
          </div>
          <div class="names">2号水泵</div>
        </div>
        <div
          class="item sb"
          :style="{
            backgroundImage: `url(${getBackKuanImg(data.sb_3)})`,
          }"
        >
          <img class="icon" :src="sbIconImgMap[data.sb_3]" alt="" />
          <div class="status" :class="data.sb_3">
            <span>{{ statusMap[data.sb_3] }}</span>
          </div>
          <div class="names">3号水泵</div>
        </div>
        <div
          class="item sb"
          :style="{
            backgroundImage: `url(${getBackKuanImg(data.sb_4)})`,
          }"
        >
          <img class="icon" :src="sbIconImgMap[data.sb_4]" alt="" />
          <div class="status" :class="data.sb_4">
            <span>{{ statusMap[data.sb_4] }}</span>
          </div>
          <div class="names">4号水泵</div>
        </div>
        <!-- 湿式静电除尘器 -->
        <div
          class="item ccq"
          :style="{
            backgroundImage: `url(${getBackKuanImg(data.sdcc_status)})`,
          }"
        >
          <img class="icon" :src="ccqImgMap[data.sdcc_status]" alt="" />
          <div class="status" :class="data.sdcc_status">
            <span>{{ statusMap[data.sdcc_status] }}</span>
          </div>
          <div class="names">湿电除尘器</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import PanelTitle from "@/views/components/PanelTitle.vue";
import { ref, onMounted, onBeforeUnmount, watch } from 'vue'

import kuanB from "@/assets/center/kuanB.png";
import kuanR from "@/assets/center/kuanh.png";
import kuanO from "@/assets/center/kuanO.png";
import ccqB from "@/assets/center/ccqB.png";
import ccqR from "@/assets/center/ccqR.png";
import ccqO from "@/assets/center/ccqO.png";
import phIconR from "@/assets/center/phIconR.png";
import phIconB from "@/assets/center/phIcon.png";
import phIconO from "@/assets/center/phIconO.png";
import sbIconB from "@/assets/center/sbIconB.png";
import sbIconR from "@/assets/center/sbIconR.png";
import sbIconO from "@/assets/center/sbIconO.png";

import cTitle from "@/assets/center/cTitle.png";
const props = defineProps({
  data: {
    type: Object,
    required: true,
  },
});
const statusMap = {
  ok: "正常运转",
  fail: "故障",
  close: "暂停运转",
};


const sbIconImgMap = {
    ok: sbIconB,
    fail: sbIconR,
    close: sbIconO, //  橙色
  },
  ccqImgMap = {
    ok: ccqB,
    fail: ccqR,
    close: ccqO, 
  };
  



  // 当前PH值
const currentPhValue = ref(getRandomInRange(props.data.ph_status))

// 更新PH值函数
const updatePhValue = () => {
  currentPhValue.value = getRandomInRange(props.data.ph_status)
}

let intervalId = null

// 组件挂载时启动定时器
onMounted(() => {
  intervalId = setInterval(updatePhValue,  6 * 1000) // 每分钟更新
})

// 组件卸载前清除定时器
onBeforeUnmount(() => {
  if (intervalId) {
    clearInterval(intervalId)
  }
})
/**
 * @param rangeStr
 * @param decimals
 */
function getRandomInRange (rangeStr, decimals = 1)  {
  if (!rangeStr) {
    return 6.5;
  }
  const [minStr, maxStr] = rangeStr.split("-");
  const min = parseFloat(minStr);
  const max = parseFloat(maxStr);
  const random = Math.random() * (max - min) + min;
  return parseFloat(random.toFixed(decimals));
};

const getBackKuanImg = (val) => {
  console.log('%c [ val ]-169', 'font-size:18px; background:#dfbce3; color:#ffffff;', val)
  const kuanMap = {
    ok: kuanB,
    fail: kuanR,
    close: kuanB
  }
  return kuanMap[val]
};
</script>
<style scoped lang="scss">
.center-panel {
  display: flex;
  flex-direction: column;
}
.center-map {
  height: 660px;
  background: url("@/assets/center/map4k.png") no-repeat center center;
}
.center-list {
  flex: 1;
  margin-top: 36px;
  height: 260px;

  .data-status-list {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    .item {
      width: 138px;
      height: 160px;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      .icon {
        margin-top: 10px;
      }
      .nums {
        margin: 12px 0;
        font-family: "钉钉进步体 Regular";
        font-size: 24px;
        font-weight: 600;
        line-height: 24px;
        text-align: center;
        color: #ffffff;
        text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.302);
      }
      .names {
        font-family: "钉钉进步体 Regular";
        font-size: 20px;
        font-weight: normal;
        line-height: 32px;
        text-align: center;
        letter-spacing: 2px;
        color: #ffffff;
      }
      .status {
        /* 自动布局 */
        // display: flex;
        // align-items: center;
        // justify-content: center;
        margin: 10px 0;
        padding: 2px 16px;
        // line-height: 24px;
        background: rgba(0, 181, 120, 0.5);
        color: #ffffff;
        // box-sizing: border-box;
        border: 1px solid #00b578;
        &.ok {
          background: rgba(0, 181, 120, 0.5);
          border: 1px solid #00b578;
        }
        &.fail { // 故障
          background: rgba(250, 81, 81, 0.5);
          border: 1px solid #fa5151;
        
        }
        &.close {
          background: rgba(255, 143, 31, 0.5);
          border: 1px solid #ff8f1f;
        }
      }
    }
  }
}
</style>
